<template>
  <div class="user-container">
      <van-nav-bar title="黑马头条" fixed/>
      <!--基本用户信息面板-->
      <div class="user-card">
          <!--用户头像姓名-->
          <van-cell>
              <!--使用title插槽自定义标题-->
                  <template #icon>
                  <img src="../../assets/logo.png" alt="" class="avatar">
              </template>
              <template #title>
                  <span class="username">用户名</span>
              </template>
              <template #label>
                <van-tag color="#ffff" text-color="#007bff">申请认证</van-tag>
              </template>
          </van-cell>
          <!--动态 关注 粉丝-->
          <div class="user-data">
              <div class="user-data-item">
                  <span>0</span>
                  <span>动态</span>
              </div>
              <div class="user-data-item">
                  <span>0</span>
                  <span>粉丝</span>
              </div>
          </div>
      </div>
      <!--操作模板-->
      <van-cell-group class="action-card">
          <van-cell icon="edit" title="编辑资料" is-link/>
          <van-cell icon="chat-o" title="阿伦同学" is-link/>
          <van-cell icon="warning-o" title="退出登录" is-link/>
      </van-cell-group>
  </div>
</template>

<script>
    // 导入api
    import {getArticlesListAPI} from "../../api/articleAPI";
    export default {
        name: "User",
        data() {
            return {
                page: 1, // 页码值
                limit: 5 // 每页显示第三条数据
            }
        },
        created() {
            this.getArticleList()
        },
        methods: {
            //获取文章列表数据
            async getArticleList() {
                const {data: res} = await getArticlesListAPI(this.page,this.limit)
                console.log(res)
            }
        }
    }
</script>

<style lang="less" scoped>
.user-container{
    .user-card{
        background-color: #007bff;
        color: white;
        padding-top: 20px;
        .van-cell{
            background-color: #007bff;
            color: white;
            &::after{
                display: none;
            }
            .avatar{
                width: 60px;
                height: 60px;
                background-color: #fff;
                border-radius: 50%;
                margin-right: 10px;
                margin-top: 20px;
            }
            .username{
                display: block;
                margin-top: 20px;
                font-size: 14px;
                font-weight: bold;
            }
        }
        .user-data{
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            padding: 30px 0;
            .user-data-item{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 20%;
            }
        }
    }
}
</style>
